<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <div class="asi">

            <Aside></Aside>
          </div>
        </el-aside>
        <el-container>
          <el-header style="
              display: flex;
              justify-content: space-between;
              border-bottom: 0.5px solid black;
              padding-top: 20px;
            ">
            <!-- 面包屑 -->
            <el-breadcrumb :separator-icon="ArrowRight">
              <span style="margin-right: 0.8rem; float: left"><el-icon>
                  <Operation />
                </el-icon></span>
              <el-breadcrumb-item :to="{ path: i.path }" v-for="i in borders">{{
                i.meta.title
                }}</el-breadcrumb-item>
            </el-breadcrumb>

            <div>
              <el-icon>
                <FullScreen />
              </el-icon>
              <el-icon>
                <Finished />
              </el-icon>
              <el-icon>
                <PieChart />
              </el-icon>
            </div>
          </el-header>
          <el-main>
            <Tabs class="tttt"></Tabs>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup lang="ts">
// import Tabs from '@/components/Tabs.vue';
import Aside from '../component/Aside.vue';
import { watch, ref } from 'vue'

import { ArrowRight, Operation, FullScreen, Finished, PieChart } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const route = useRoute()

import type { borday } from '@/Type/Type.ts'
// 面包屑
const borders = ref<borday[]>([])
watch(
  route,
  () => {
    borders.value = route.matched as []
  },
  { immediate: true }
)

// 定义组件选项
const components = {
  //   Tabs,
  Aside
}
</script>

<style scoped>
.asi {
  background-color: rgba(48, 65, 86);
  height: 100vh;
}
</style>